CSS Scroll Snap'i jõudlus: süvaanalüüs haakepunktide arvutamise optimeerimisest

Kasutaja kerimisel käivitub väike kogus JavaScripti, et arvutada, millised elemendid *peaksid* nüüd nähtavad olema. Seejärel taaskasutab see olemasolevat 10–20 DOM-sõlme kogumit, eemaldab vaateväljast välja kerinud elementide andmed ja täidab need vaatevälja ilmuvate uute elementide andmetega.

Virtualiseerimise rakendamine kerimishaakimisele

See esitab väljakutse. CSS Scroll Snap on deklaratiivne ja tugineb reaalsete DOM-elementide olemasolule nende asukohtade arvutamiseks. Kui elemente ei eksisteeri, ei saa veebilehitseja neile haakepunkte luua.

Lahendus on hübriidne lähenemine. Te säilitate oma kerimiskonteineris väikese arvu reaalseid DOM-elemente. Nendel elementidel on `scroll-snap-align` omadus ja need haakuvad korrektselt. Virtualiseerimisloogika, mida haldab JavaScript, vastutab nende väheste DOM-sõlmede sisu vahetamise eest, kui kasutaja kerib läbi suurema, virtuaalse andmekogumi.

Virtualiseerimise eelised:

• Massiivne jõudluse kasv: Veebilehitseja peab arvutama paigutuse ja haakepunktid ainult käputäie elementide jaoks, sõltumata sellest, kas teie andmekogumis on 1000 või 1 000 000 elementi. See peaaegu kõrvaldab esialgse arvutuskulu ja ümberarvutuskulu kerimise ajal.
• Vähendatud mälukasutus: Vähem DOM-sõlmi tähendab vähem mälu, mida veebilehitseja tarbib, mis on kriitilise tähtsusega madalama klassi mobiilseadmete jõudluse jaoks.

Puudused ja kaalutlused:

• Suurenenud keerukus: Te vahetate puhta CSS-i lihtsuse JavaScripti-põhise lahenduse keerukuse vastu. Nüüd vastutate oleku haldamise, nähtavate elementide arvutamise ja DOM-i tõhusa värskendamise eest.
• Juurdepääsetavus: Virtualiseerimise korrektne rakendamine juurdepääsetavuse seisukohast ei ole triviaalne. Peate haldama fookust, tagama, et ekraanilugejad saavad sisus navigeerida, ja säilitama õiged ARIA atribuudid.
• Leidmine lehelt (Ctrl/Cmd+F): Veebilehitseja loomulik leidmisfunktsioon ei tööta sisu puhul, mis ei ole hetkel DOM-is renderdatud.

Enamiku suuremahuliste rakenduste puhul kaaluvad jõudluse eelised keerukuse kaugelt üles. Te ei pea seda nullist ehitama. Suurepärased avatud lähtekoodiga teegid nagu TanStack Virtual (endine React Virtual), `react-window` ja `vue-virtual-scroller` pakuvad robustseid, tootmisvalmis lahendusi virtualiseerimise rakendamiseks.

Optimeerimisstrateegia 2: `content-visibility` omadus

Kui täielik virtualiseerimine tundub teie kasutusjuhtumi jaoks liialdusena, on olemas kaasaegsem, CSS-i-põhine lähenemine, mis võib pakkuda märkimisväärset jõudluse kasvu: `content-visibility` omadus.

Kuidas see töötab

`content-visibility` omadus on võimas vihje veebilehitseja renderdamismootorile. Kui te seate elemendile `content-visibility: auto;`, ütlete te veebilehitsejale:

"Teil on minu luba jätta vahele enamik selle elemendi renderdamistööst (sealhulgas paigutus ja värvimine), kui te otsustate, et see ei ole hetkel kasutaja jaoks asjakohane – st see on ekraaniväline."

Kui element kerib vaateaknasse, alustab veebilehitseja selle renderdamist automaatselt just õigel ajal. See nõudmisel renderdamine võib dramaatiliselt vähendada pika elementide loendiga lehe esialgset laadimisaega.

Kaaslane `contain-intrinsic-size`

Siin on konks. Kui veebilehitseja ei renderda elemendi sisu, ei tea see selle suurust. See põhjustaks kerimisriba hüppamist ja suuruse muutumist, kui kasutaja kerib ja uusi elemente renderdatakse, luues kohutava kasutajakogemuse. Selle lahendamiseks kasutame `contain-intrinsic-size` omadust.

contain-intrinsic-size: 300px 500px; (kõrgus ja laius) pakub elemendile enne selle renderdamist kohatäitja suurust. Veebilehitseja kasutab seda väärtust kerimiskonteineri ja selle kerimisriba paigutuse arvutamiseks, vältides igasuguseid häirivaid hüppeid.

Siin on, kuidas te seda rakendaksite kerimishaakimise elementide loendile:

            
.scroll-snap-container {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow-y: scroll;
}

.snap-item {
  scroll-snap-align: start;
  /* Maagia toimub siin */
  content-visibility: auto;
  contain-intrinsic-size: 100vh; /* Eeldades täiskõrgusega jaotisi */
}

            

              
                Copy
              
            
          

`content-visibility` ja haakepunktide arvutamine

See tehnika aitab oluliselt esialgse renderdamise kulu puhul. Veebilehitseja suudab esialgse paigutuse läbida palju kiiremini, kuna see peab ekraaniväliste elementide jaoks kasutama ainult kohatäitja `contain-intrinsic-size` väärtust, selle asemel et arvutada nende sisu keerulist paigutust. See tähendab kiiremat interaktiivsuse aega.

`content-visibility` eelised:

• Lihtsus: See on vaid kaks rida CSS-i. See on palju lihtsam rakendada kui täielik JavaScripti virtualiseerimisteek.
• Progressiivne täiustamine: Veebilehitsejad, mis seda ei toeta, lihtsalt ignoreerivad seda ja leht toimib nagu varem.
• Säilitab DOM-i struktuuri: Kõik elemendid jäävad DOM-i, nii et veebilehitseja loomulikud funktsioonid, nagu leidmine lehelt, töötavad edasi.

Piirangud:

• Pole imerohi: Kuigi see lükkab renderdamistööd edasi, tunnistab veebilehitseja siiski kõigi DOM-sõlmede olemasolu. Kümnete tuhandete elementidega loendite puhul võib ainuüksi sõlmede arv endiselt tarbida märkimisväärselt mälu ja veidi protsessorit stiili ja puu haldamiseks. Nendel äärmuslikel juhtudel jääb virtualiseerimine paremaks.
• Täpne suuruse määramine: `contain-intrinsic-size` tõhusus sõltub sellest, kas pakute mõistlikult täpse kohatäitja suuruse. Kui teie elementidel on väga erineva sisukõrgusega, võib olla keeruline valida ühte väärtust, mis ei põhjustaks sisu nihkumist.
• Veebilehitseja tugi: Kuigi tugi kaasaegsetes Chromiumi-põhistes veebilehitsejates ja Firefoxis on hea, ei ole see veel universaalne. Enne selle kriitilise funktsioonina kasutuselevõttu kontrollige alati allikat nagu CanIUse.com.

Optimeerimisstrateegia 3: JavaScriptiga viivitatud DOM-i manipuleerimine

See strateegia on suunatud ümberarvutamise jõudluskulule dünaamilistes rakendustes, kus elemente lisatakse või eemaldatakse kerimiskonteinerist sageli.

Probleem: surm tuhande lõikega

Kujutage ette otseülekannet, kus uued elemendid saabuvad WebSocket-ühenduse kaudu. Naiivne rakendus võib lisada iga uue elemendi DOM-i kohe selle saabumisel:

            
// ANTISKEEM: See käivitab paigutuse ümberarvutuse iga üksiku elemendi jaoks!
socket.on('newItem', (itemData) => {
  const newItemElement = document.createElement('div');
  newItemElement.className = 'snap-item';
  newItemElement.textContent = itemData.text;
  container.prepend(newItemElement);
});

            

              
                Copy
              
            
          

Kui kümme elementi saabub kiiresti järjest, käivitab see kood kümme eraldi DOM-i manipulatsiooni. Iga `prepend()` operatsioon muudab paigutuse kehtetuks, sundides veebilehitsejat ümber arvutama kõigi konteineris olevate haakepunktide asukohad. See on klassikaline Layout Thrashing'u põhjus ja muudab kasutajaliidese äärmiselt katkendlikuks.

Lahendus: koondage oma värskendused

Võti on nende värskenduste koondamine üheks operatsiooniks. Selle asemel, et muuta elavat DOM-i kümme korda, saate uued elemendid üles ehitada mälus olevasse `DocumentFragment`'i ja seejärel lisada fragmendi DOM-i ühe korraga. See tulemuseks on ainult üks paigutuse ümberarvutus.

Saame seda veelgi parandada, kasutades `requestAnimationFrame`, et tagada meie DOM-i manipulatsiooni toimumine kõige optimaalsemal ajal, vahetult enne, kui veebilehitseja hakkab järgmist kaadrit värvima.

            
// HEA SKEEM: DOM-i värskenduste koondamine
let itemBatch = [];
let updateScheduled = false;

socket.on('newItem', (itemData) => {
  itemBatch.push(itemData);

  if (!updateScheduled) {
    updateScheduled = true;
    requestAnimationFrame(updateDOM);
  }
});

function updateDOM() {
  const fragment = document.createDocumentFragment();

  itemBatch.forEach(itemData => {
    const newItemElement = document.createElement('div');
    newItemElement.className = 'snap-item';
    newItemElement.textContent = itemData.text;
    fragment.appendChild(newItemElement);
  });

  container.prepend(fragment);

  // Lähtestamine järgmise partii jaoks
  itemBatch = [];
  updateScheduled = false;
}

            

              
                Copy
              
            
          

See viivitatud/koondatud lähenemine muudab rea kulukaid, individuaalseid värskendusi üheks, tõhusaks operatsiooniks, säilitades teie kerimishaakimise liidese reageerimisvõime.

Täpsemad kaalutlused ja parimad tavad globaalsele publikule

Jõudluse optimeerimine ei tähenda ainult asjade kiireks tegemist tipptasemel arendaja masinas. See tähendab sujuva ja juurdepääsetava kogemuse tagamist kõigile kasutajatele, olenemata nende seadmest, võrgu kiirusest või asukohast. Jõudluslik veebisait on kaasav veebisait.

Meedia laisk laadimine

Teie haakuvad elemendid sisaldavad tõenäoliselt pilte või videoid. Isegi kui te virtualiseerite DOM-sõlmi, oleks 5000 elemendiga loendi kõigi meediavarade innukas laadimine võrgu- ja mälukasutuse seisukohast katastroofiline. Kombineerige alati kerimisjõudluse optimeerimisi meedia laisa laadimisega. Loomulik `loading="lazy"` atribuut `` ja `